<!--
 * @Description:  studyReport -- 学习报告
 * @Author: your name
 * @Date: 2024-02-23
 * @LastEditTime: 2024-02-23
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/newzhike/questionBank' }">
        基础测评
      </el-breadcrumb-item>
      <el-breadcrumb-item>查看报告</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="mainBox">
      <div class="tit">
        <h5>{{ coursename }}学习报告</h5>
        <p>书山有路勤为径，学海无涯苦作舟。再忙也别忘了学习哦~</p>
      </div>

      <!-- 学习概况 -->
      <div class="studySituation">
        <div class="partTit">学习概况</div>
        <div class="situList">
          <div class="item">
            <div>
              <div>
                <img src="@/assets/images/clock201.png" alt="" />
                <p>
                  累计时长<span>{{ rankList[0]?.task_hour }}小时</span>
                </p>
              </div>
              <div>
                <img src="@/assets/images/up1.png" alt="" />
                <p>
                  排名高于<span class="bfb">
                    {{ rankList[0]?.task_hour_chao }}
                  </span>
                  的人
                </p>
              </div>
            </div>
            <div>
              <div>
                <img src="@/assets/images/mission1.png" alt="" />
                <p>
                  学习了<span>{{ rankList[0]?.task_nums }}个</span>任务
                </p>
              </div>
              <div>
                <img src="@/assets/images/down1.png" alt="" />
                <p>
                  排名低于<span class="bfb">
                    {{ rankList[0]?.task_nums_chao }}
                  </span>
                  的人
                </p>
              </div>
            </div>
          </div>
          <div class="item">
            <div>
              <div>
                <img src="@/assets/images/book1.png" alt="" />
                <p>
                  做题数<span>{{ rankList[1]?.topic_nums }}题</span>
                </p>
              </div>
              <div>
                <img src="@/assets/images/up1.png" alt="" />
                <p>
                  排名高于<span class="bfb">
                    {{ rankList[1]?.topic_nums_chao }}
                  </span>
                  的人
                </p>
              </div>
            </div>
            <div>
              <div>
                <img src="@/assets/images/yes1.png" alt="" />
                <p>
                  正确率<span>{{ rankList[1]?.topic_nums }}%</span>
                </p>
              </div>
              <div>
                <img src="@/assets/images/down1.png" alt="" />
                <p>
                  排名低于<span class="bfb">
                    {{ rankList[1]?.topic_bfb_chao }}
                  </span>
                  的人
                </p>
              </div>
            </div>
          </div>
          <div class="item">
            <div>
              <div>
                <img src="@/assets/images/icon_ask1.png" alt="" />
                <p>
                  提问数<span>{{ rankList[2]?.question_nums }}个</span>
                </p>
              </div>
              <div>
                <img src="@/assets/images/up1.png" alt="" />
                <p>
                  排名高于<span class="bfb">
                    {{ rankList[2]?.question_nums_chao }}
                  </span>
                  的人
                </p>
              </div>
            </div>
            <div>
              <div>
                <img src="@/assets/images/note1.png" alt="" />
                <p>
                  笔记数<span>{{ rankList[2]?.notice_nums }}个</span>
                </p>
              </div>
              <div>
                <img src="@/assets/images/down1.png" alt="" />
                <p>
                  排名低于<span class="bfb">
                    {{ rankList[2]?.notice_nums_chao }}
                  </span>
                  的人
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 视频概况 -->
      <div class="videoMission">
        <div class="partTit">视频概况</div>
        <div class="box">
          <div class="left">
            <div class="complete">
              <p>
                总任务数:<span>{{ completePlan.task_count }}个</span>
              </p>
              <p>
                当前完成:<span>{{ completePlan.task_nums }}个</span>
              </p>
            </div>
            <div class="progress">
              <el-progress
                type="circle"
                :percentage="completePlan.task_bfb"
                :width="169"
                color="#0193ff"
                :stroke-width="10"
              >
              </el-progress>
            </div>
            <div class="progressIns">
              <p>完成数</p>
              <p>未完成率</p>
            </div>
          </div>
          <div class="right" style="padding-left: 5px">
            <div class="tabs">
              <p
                :class="{ act: currentId == idx }"
                @click="currentId = idx"
                v-for="(item, idx) in tabArr"
                :key="item.id"
              >
                {{ item.name }}
              </p>
            </div>
            <div class="listBox">
              <div class="inner">
                <div
                  class="item"
                  v-for="(taskItem, idx) in accountList"
                  :key="taskItem.id"
                >
                  <p class="name">{{ taskItem.name }}</p>
                  <p>
                    总数：<span>{{ taskItem.count }}</span>
                  </p>
                  <p>
                    完成：<span>{{ taskItem.nums }}</span>
                  </p>
                  <p>
                    进度：<span>{{ taskItem.bfb }}%</span>
                  </p>
                  <a href="javascript:void(0)" @click="toInfo(taskItem)">
                    查看详情 >
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 试题任务 -->
      <div class="testMission">
        <div class="partTit">试题任务</div>
        <div class="chartBox">
          <div class="chartItem">
            <h5>进七天学习情况</h5>
            <div id="chart1"></div>
          </div>
          <div class="chartItem">
            <h5>学情对比</h5>
            <div id="chart2"></div>
          </div>
        </div>
      </div>

      <!-- 综合评估 -->
      <div class="assessment">
        <div class="left">
          <div class="partTit">综合评估</div>
          <div class="chartBox">
            <div class="assInfo">
              <p>您目前的学习状态为：差</p>
              <p>预估按照这个进度通过的概率为：50%</p>
              <p>
                建议：在接下来的学习中，须重点增加学习时间和做题练习，加油，未来的持证人！如果有疑问，可以随时咨询学管老师哦~
              </p>
            </div>
          </div>
        </div>
        <div class="rankBox">
          <div class="partTit">学习排行榜</div>
          <div class="rankList">
            <div class="top">
              <p :class="{ act: rid == 1 }" @click="switchRank(1)">
                任务完成数
              </p>
              <p :class="{ act: rid == 2 }" @click="switchRank(2)">
                连续学习天数
              </p>
            </div>
            <div class="list" v-loading="loading">
              <div class="item isMe">
                <div class="rankNum">
                  <div class="inner">0</div>
                </div>
                <div class="avatar">
                  <img
                    src="https://www.rongyuejiaoyu.com/static/index/images/head4.jpg"
                    alt=""
                  />
                </div>
                <div class="text">
                  <p>132****2910</p>
                  <p>1223</p>
                </div>
                <span class="isMe">我</span>
              </div>
              <div class="item" v-for="(item, index) in 2" :key="index">
                <div class="rankNum rankTop" v-if="item.rank == 1">
                  <img src="@/assets/images/no1.png" alt="" />
                </div>
                <div class="rankNum rankTop" v-else-if="item.rank == 2">
                  <img src="@/assets/images/no2.png" alt="" />
                </div>
                <div class="rankNum rankTop" v-else-if="item.rank == 3">
                  <img src="@/assets/images/no3.png" alt="" />
                </div>
                <div class="rankNum rankTop" v-else>31</div>
                <div class="avatar">
                  <img
                    src="https://img.rongyuejiaoyu.com/uploads/20231016/00422391610.jpg"
                    alt=""
                  />
                </div>
                <div class="text">
                  <p>132****2910</p>
                  <p style="font-size: 12px">222</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBaogaoByGaikuang,
  getBaogaoByViedeo,
  getBaogaoBySubject,
  getBaogaoBySubjectInfo,
  getTongjiBy7day,
  getTongjiByDuiBi
} from '@/api/studyPlan'
import * as echarts from 'echarts'
export default {
  name: 'studyReport',
  data() {
    return {
      coursename: 'CFA快速通关APS智播课（二级）学习报告',
      tabArr: [],
      rankList: [],
      completePlan: {},
      reportData: '',
      currentId: 0,
      rid: 1,
      loading: false,
      accountList: [],
      allNumVideo: [], // 做题图表 学习视频数 数组
      testNum: [], // 做题图表 做题数 数组
      categoryname: [], // 做题图表 示例名称数组
      // 学情对比
      daysNames: [], // 名称
      allWholeNetwork: [], // 全网正确率
      myCorrect: []
    }
  },
  created() {
    this.studyReportPlan()
  },
  mounted() {
    this.getData()
  },
  methods: {
    studyReportPlan() {
      getBaogaoByViedeo({ combo_id: 1 }).then(({ data: data }) => {
        this.completePlan = data.data
      })
      getBaogaoByGaikuang({ combo_id: 1 }).then(({ data: data }) => {
        this.rankList = data.data
      })
      getBaogaoBySubject({ combo_id: 1 }).then(({ data: data }) => {
        this.tabArr = data.data
      })
      getBaogaoBySubjectInfo({ cid: 1, combo_id: 1 }).then(({ data: data }) => {
        this.accountList = data.data
      })
    },
    toInfo() {
      this.$router.push({
        path: 'courseOutline',
        query: {}
      })
    },
    getData() {
      getTongjiBy7day({ combo_id: 2 }).then(({ data: data }) => {
        if (data.code == 1) {
          this.categoryname = data.data.days
          this.testNum = data.data.topic
          this.allNumVideo = data.data.video
          this.initChart()
        }
      })

      getTongjiByDuiBi({ combo_id: 2 }).then(({ data: data }) => {
        this.daysNames = data.data.days
        this.myCorrect = data.data.my
        this.allWholeNetwork = data.data.all
        this.initChart()
      })
    },
    initChart() {
      let _that = this
      this.$nextTick(() => {
        let chartDom = document.getElementById('chart1')
        let myChart = echarts.init(chartDom)
        let chartDom2 = document.getElementById('chart2')
        let myChart2 = echarts.init(chartDom2)
        let option, option2

        // 做题情况
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: ['学习视频数', '做题数']
          },
          xAxis: [
            {
              type: 'category',
              data: _that.categoryname,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 50,
              interval: 10,
              axisLabel: {
                formatter: '{value}'
              }
            }
            // {
            //   type: 'value',
            //   name: '正确率',
            //   min: 0,
            //   max: 100,
            //   interval: 10,
            //   axisLabel: {
            //     formatter: '{value} %'
            //   }
            // }
          ],
          series: [
            {
              name: '学习视频数',
              type: 'bar',
              barWidth: 15,
              // tooltip: {
              //   valueFormatter: function (value) {
              //     return value + ' 道'
              //   }
              // },
              data: _that.allNumVideo
            },
            {
              name: '做题数',
              type: 'bar',
              barWidth: 15,
              // tooltip: {
              //   valueFormatter: function (value) {
              //     return value + ' '
              //   }
              // },
              data: _that.testNum
            }
            // {
            //   name: '正确率',
            //   type: 'line',
            //   yAxisIndex: 1,
            //   tooltip: {
            //     valueFormatter: function (value) {
            //       return value + ' %'
            //     }
            //   },
            //   data: [
            //     2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
            //   ]
            // }
          ]
        }

        // option = {
        //   tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //       crossStyle: {
        //         color: '#999'
        //       }
        //     }
        //   },
        //   xAxis: [
        //     {
        //       type: 'category',
        //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //       axisPointer: {
        //         type: 'shadow'
        //       }
        //     }
        //   ],
        //   legend: {
        //     data: ['Evaporation', 'Precipitation', 'Temperature']
        //   },
        //   yAxis: [
        //     {
        //       type: 'value',
        //       name: '',
        //       min: 0,
        //       max: 250,
        //       interval: 50
        //     }
        //   ],
        //   series: [
        //     {
        //       name: 'Evaporation',
        //       type: 'bar',

        //       data: [
        //         2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
        //         3.3
        //       ]
        //     },
        //     {
        //       name: 'Precipitation',
        //       type: 'bar',
        //       data: [
        //         2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
        //         2.3
        //       ]
        //     }
        //   ]
        // }

        /*  // 试卷准确率
        option2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          calculable: true,
          legend: {
            data: ['试卷准确率'],
            itemGap: 5
          },
          grid: {
            top: '12%',
            left: '2%',
            right: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '准确率',
              interval: 5,
              axisLabel: {
                formatter: function (a) {
                  a = +a
                  return isFinite(a) ? echarts.format.addCommas(+a) : ''
                }
              }
            }
          ],
          dataZoom: [
            {
              show: true,
              start: 94,
              end: 100
            },
            {
              type: 'inside',
              start: 94,
              end: 100
            }
          ],
          series: [
            {
              name: '准确率',
              type: 'bar',
              barWidth: 20,
              data: [
                2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
              ]
            }
          ]
        } */
        option2 = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['全网做题正确率', '您的做题正确率']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _that.daysNames
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '全网做题正确率',
              type: 'line',
              stack: 'Total',
              data: _that.allWholeNetwork
            },
            {
              name: '您的做题正确率',
              type: 'line',
              stack: 'Total',
              data: _that.myCorrect
            }
          ]
        }

        option && myChart.setOption(option)
        option2 && myChart2.setOption(option2)
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/studyReport.scss';
</style>
